<template>
    <div>
        <el-divider content-position="center">布局</el-divider>
        <div class="box">

            <div class="layout" :class="SettingStore.layout === 'A' ? 'active' : ''" @click="toogle('A')">
                <LayoutA />
            </div>
            <div class="layout" :class="SettingStore.layout === 'B' ? 'active' : ''" @click="toogle('B')">
                <LayoutB />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import LayoutA from "@/components/Action/layoutcheck/A.vue"
import LayoutB from "@/components/Action/layoutcheck/B.vue"
import { useSetting } from '@/pinia'

const SettingStore = useSetting()


const toogle = (type: 'A' | 'B') => {
    if (type === "A") {
        SettingStore.setCollapse(true)
    } else {
        SettingStore.setCollapse(false)
    }
    SettingStore.$patch({
        layout: type
    })
}
</script>

<style lang="less" scoped>
.box {
    display: flex;
    flex-wrap: wrap;
}



.layout {
    box-sizing: border-box;
    width: calc(50% - 10px);
    height: 100px;
    padding: 8px;
    display: inline-block;
    transition: all 0.5s;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;

    &:hover {
        box-shadow: var(--el-box-shadow-lighter);

        transform: scale(1.05);
    }
}

.active {
    border: 2px solid var(--active-color);
}
</style>